<html>
<head>
	<script type="text/javascript" src="/_ah/channel/jsapi"></script>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script>

var token = "{{js .Token}}";
var clientid = "{{js .ClientId}}";

function openChannel(onopen) {
	var chan = new goog.appengine.Channel(token);
	var sock = chan.open();
	sock.onopen = onopen
	sock.onmessage = function(msg) {
		var m = msg.data;
		var img = "Image: "
		if (m.indexOf(img) == 0) {
			var url = m.slice(img.length)
			$("<img/>").attr("src", url).appendTo("#log");
			$("#render").attr("disabled", null);
			return;
		}
		if (m.indexOf("Error: ") == 0) {
			$("#render").attr("disabled", null);
		}
		$('<div class="msg" />').text(m).appendTo("#log");
	}
}

function bindEvents() {
	$("#render").click(function() {
		$("#render").attr("disabled", "disabled");
		$("#log").empty();
		$.ajax({
			type: "POST",
			url: "/render",
			data: {
				scene: $("#code").val(),
				clientid: clientid,
			},
			success: function() { },
			error: function(err) {
				$("#log").text(err.responseText);
			}
		});
	});
}

function init() {
	openChannel(bindEvents);
}

google.load("jquery", "1");
google.setOnLoadCallback(function() { $(document).ready(init); });

	</script>
	<style>
#code {
	width: 40%;
	height: 80%;
}
#log {
	width: 55%;
	float: right;
}
#log img {
	border: 2px solid #999;
	margin-top: 5px;
}

	</style>
</head>
<body>
	<h1>Go Raytracer</h1>

	<div id="log"></div>

	<textarea id="code">{{html .Scene}}</textarea>
	<br>
	<input id="render" type="button" value="Render">
	<br>
	<br>
	An App Engine front-end for
	<a href="https://bitbucket.org/zombiezen/goray/wiki/Home">goray</a>.
</body>
</html>
